<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-10 22:56:03
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-12 23:36:57
 * @FilePath: /chat-ai-plus/src/components/Popup/Popup.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE, 
-->
<template>
  <view v-if="curRoute === 'email'">
    <view class="h2">账号密码登录</view>
    <u-form class="mt_lg" :model="formState" :rules="rules" ref="formRef">
      <u-form-item prop="phoneOrEmail">
        <u-input
          v-model="formState.phoneOrEmail"
          :placeholder="$t('emailLogin.form.email.placeholder')"
          prefixIcon="email-fill"
        ></u-input>
      </u-form-item>

      <u-form-item prop="password">
        <u-input
          type="password"
          v-model="formState.password"
          :placeholder="$t('emailLogin.form.password.placeholder')"
          prefixIcon="lock-fill"
        >
          <template #suffix>
            <u-icon name="eye-off"></u-icon>
          </template>
        </u-input>
      </u-form-item>
      <u-form-item>
        <view class="justify_end">
          <view></view>
          <u-link class="t_right" href="javascript:"  @click="handleNav('retrieve')" text="忘记密码"></u-link>
        </view>
      </u-form-item>
      <u-form-item class="mt_lg">
        <u-button
          type="primary"
          @click="handleSubmit"
          :text="$t('emailLogin.form.submit')"
          shape="circle"
        ></u-button>
      </u-form-item>
    </u-form>
    <slot></slot>
    <view class="mt_sm color_light justify_center">
        <view class="align-items_center">
          <view>还没有账号，</view
          ><u-link
            class="t_right d"
            @click="handleNav('register')"
            href="javascript:"
            text="点击注册"
          ></u-link>
        </view>
      </view>
  </view>
  <Register v-if="curRoute === 'register'" @back="handleBack"></Register>
  <Retrieve v-if="curRoute === 'retrieve'"  @back="handleBack"></Retrieve>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { useFormState } from './hooks';

import Register from '../Register/index.vue';
import Retrieve from '../Retrieve/index.vue';

export default defineComponent({
  name: 'Email',
  components: {
    Register,
    Retrieve,
  },
  setup() {
    const { formRef, formState, rules, handleSubmit } = useFormState();

    const curRoute = ref<String>('email')
    const handleNav = (route: String) => {
      curRoute.value = route;
    };

    const handleBack = () => {
      curRoute.value = 'email';
    };

    return {
      formRef,
      formState,
      rules,
      handleSubmit,
      handleNav,
      curRoute,
      handleBack
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
</style>
